<template>
  <div style="padding: 0 16px;">
    <div class="courseView">
      <div  class="itemView" v-for="(course) in courseList">
        <div v-if="course.subject" @click="courseClick(course.subject)">
          <m_course :courseData='course.subject' :subscriptionId='subscriptionId'></m_course>
        </div>
        <div v-else @click="courseClick(course)">
          <m_course :courseData='course' :subscriptionId='subscriptionId'></m_course>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

  import M_course from '@/components/m_course.vue'
  import $ from 'jquery'
  import BuyDialog from "../BuyDialog";
  import levelName from "../../../../utils/level_util";

  export default {
    props: ['courseList', 'subscriptionId', 'type'],
    components: {
      M_course,
    },
    data() {
      return {}
    },
    mounted() {

    },
    computed: {
      screenW() {
        return $(window).width()
      }
    },
    methods: {
      courseClick(el) {
        if(el.orgLevelId != 0 && el.orgLevelId){
          //有等级限制的课程
          if (el.hasBuyInt === 0) {
            BuyDialog.showDialog('课程',levelName(el))
          } else {
            this.$_router.push(`/course/courseDetail/${el.id}`)
          }
        }else{
          this.$_router.push(`/course/courseDetail/${el.id}`)
          //无等级限制的课程
        }
      },
    }
  }
</script>

<style scoped>
  .courseView {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .courseView :nth-child(2n) {
    margin-right: 0px;
  }

  .itemView {
    width: calc((100% - 11px) / 2);
    margin-right: 11px;
    margin-bottom: 16px;
  }
</style>
